<template>
<div class="page" v-loading='isLoading' element-loading-background="rgba(0, 0, 0, 0.3)" element-loading-text="正在加载">
  <div class="address">
    <!-- <div class="address-item">
      <div class="address-title">省</div>
      <i-select style="width:80%" placeholder="全部" clearable :value='sheng_id' @on-change="shengChange">
        <i-option v-for="item in shengList" :value="item.id" :key="item.id">{{ item.city_name }}</i-option>
      </i-select>
    </div> -->
    <div class="address-item width50" v-if="city_type==1">
      <div class="address-title" >市</div>
      <i-select style="width:80%" placeholder="全部" :value='shi_id' @on-change="shiChange" clearable>
        <i-option v-for="item in shiList" :value="item.id" :key="item.id">{{ item.city_name }}</i-option>
      </i-select>
    </div>
    <div class="address-item width50" v-if="city_type<=2">
      <div class="address-title">区</div>
      <i-select style="width:80%" placeholder="全部" :value='qu_id'  @on-change="quChange" clearable>
        <i-option v-for="item in quList" :value="item.id" :key="item.id">{{ item.city_name }}</i-option>
      </i-select>
    </div>
  </div>
</div>
</template>
<script>
import { city } from '@/api/api'
export default {
  data(){
    return{
      city_id:1,
      shi_id:'',
      qu_id:'',
      sheng_id:'',
      shengList:[],
      shiList:[],
      quList:[],
      nowCityList:[],
      isLoading:false,
      city_type:3
    }
  },
  created(){
    this.city_id=this.$route.query.city_id
    this.city_type=this.$route.query.city_type
    this.getCity()
  },
  computed: {
  },
  mounted(){
    
  },
  methods:{
    getCity(){
      this.isLoading=true
      city({city_id:1}).then(res=>{
        this.shengList=res.data
        this.getDetailCity()
        this.isLoading=false
      })
      // city({city_id:this.city_id}).then(res=>{
      //   if(this.city_id==1){
      //     this.shengList=res.data
      //   }else if(this.city_type==1){
      //     this.shiList=res.data
      //   }else{
      //     this.quList=res.data
      //   }
      // })
    },
    getDetailCity(){
      this.shengList.forEach(item=>{
        if(item.id == this.$route.query.city_id){
          this.nowCityList[0]=item.id
          this.sheng_id = item.id
          this.shiList = item.children
        }else if( item.children && item.children.length>0 ){
          item.children.forEach(item1=>{
            if(item1.id == this.$route.query.city_id){
              this.nowCityList[1]=item1.id
              this.shi_id = item1.id
              this.sheng_id=item.id
              this.shiList = item.children
              this.quList= item1.children
            }else if( item1.children && item1.children.length>0 ){
              item1.children.forEach(item2=>{
                if(item2.id == this.$route.query.city_id){
                  this.nowCityList[2]=item2.id

                  this.qu_id=item2.id
                  this.shi_id = item1.id
                  this.sheng_id=item.id
                  this.shiList = item.children
                  this.quList= item1.children
                }
              })
            }
          })
        }
      })
    },
    shengChange(id){
      this.sheng_id=id
      this.qu_id = 0
      this.shi_id = 0
      this.quList=[]
      this.shiList=[]
      let index= this.shengList.findIndex(item=>item.id==id)
      if(index!=-1){
        this.shiList = this.shengList[index].children
        this.cityItem=this.shengList[index]
        this.$emit('changeInit',this.shengList[index])
      }else{
        this.cityItem={city_name:''}
        this.$emit('changeInit',{city_name:''})
      }
    },
    shiChange(id){
      this.shi_id=id
      this.qu_id = 0
      this.quList=[]
      let index= this.shiList.findIndex(item=>item.id==id)
      if(index!=-1){
        this.quList = this.shiList[index].children
        this.cityItem=this.shiList[index]
        this.$emit('changeInit',this.shiList[index])
      }else{
        this.cityItem= this.shengList.find(item=>item.id==this.sheng_id)||this.cityItem||{city_name:''}
        this.$emit('changeInit',this.cityItem)
      }
    },
    quChange(id){
      this.qu_id=id
      if(id){
        this.cityItem= this.quList.find(item=>item.id==id)
        this.$emit('changeInit',this.cityItem)
      }else{
        this.cityItem= this.shiList.find(item=>item.id==this.shi_id)||this.shengList.find(item=>item.id==this.sheng_id)||{city_name:''}
        this.$emit('changeInit',this.cityItem)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.address{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 16px;
  margin: 5px;
  .address-item{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
    color: #333;
    .address-title{
      margin-right: 4px;
    }
    .calcW{
      width: calc(100% - 46px);
    }
  }
  .width50{
    width: 45%;
  }
  .big{
    width: 100%;
  }
}
</style>